<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{width: 400px;margin: 100px auto}
        #messageDiv{
            position: absolute;
            left: 0;
            right: 0;
            width: 200px;
            top: 170px;
            height: 30px;
            line-height: 30px;
            border: solid #ffe313 1px;
            background-color: #fff89b;
            margin: auto;
            font-size: 13px;
            text-align: center;
            color: red;
        }
        .main{
            border: 1px solid gray;
            width: 300px;
            height:300px;
            margin: auto;
        }
        .registerButton2{
            border: 1px solid gray;
            width: 300px;
            height:300px;
            margin: auto;
            display: none;
        }
        .cunkuan1{
            width: 200px;
            height: 130px;
            background-color: white;
            border: 1px solid gray;
            position: absolute;
            top: 150px;
            left: 670px;
            display: none;
        }
        .qukuan3{
            width: 200px;
            height: 130px;
            background-color: white;
            border: 1px solid gray;
            position: absolute;
            top: 150px;
            left: 670px;
            display: none;
        }
    </style>
</head>
<body>
<div id="messageDiv"></div>

    <div class="cunkuan1">
            <form id="cunkuan2">
                <div style="">存款</div>
                <input type="text" value="" style="margin-left: 20px;margin-top: 20px" name="money">
                <button style="margin-top: 30px;margin-left: 60px;width: 80px" id="cunkuan3" type="button">确定</button>
                <input type="button" value="取消" onclick="f()">
            </form>
    </div>

<div class="qukuan3">
    <form id="qukuan1">
        <div style="">取款</div>
        <input type="text" value="" style="margin-left: 20px;margin-top: 20px" name="money">
        <button style="margin-top: 30px;margin-left: 60px;width: 80px" id="qukuan2" type="button">确定</button>
        <input type="button" value="取消" onclick="p()">
    </form>
</div>

<form id="loginForm">
    <div class="main">
        <div style="font-size: 40px;margin-left: 20px">登录ATM系统</div>
        <div style="margin-left: 40px;margin-top: 50px">
            名字：<input name="name" type="text"><br/>
            密码：<input name="password" type="password"><br/>
        </div>
        <div style="margin-left: 120px;margin-top: 80px">
            <button type="button" id="loginButton" style="width: 60px">登录</button>
            <button type="button" id="registerButton" style="width: 60px">注册</button>
        </div>
    </div>
</form>

<form id="registerButton1">
    <div class="registerButton2">
        <div style="font-size: 40px;margin-left: 20px">注册ATM系统</div>
        <div style="margin-left: 40px;margin-top: 50px">
            名字：<input name="name" type="text"><br/>
            密码：<input name="password" type="password"><br/>
        </div>
        <div style="margin-left: 120px;margin-top: 80px">
            <input type="button" value="返回" style="width: 60px" onclick="w()">
            <button type="button" id="registerButton4" style="width: 60px">确定</button>
        </div>
    </div>
</form>

<div id="mainMenuDiv">
    <div class="main">
        <div style="font-size: 50px;margin-left: 30px">ATM系统</div>
        <div style="margin-left: 70px;margin-top: 80px">
            <button id="queryButton" style="width: 80px">查询</button>
            <button id="cunkuan" style="width: 80px">存款</button>
            <button style="width: 80px" id="qukuan">取款</button>
            <button id="logoutButton" style="width: 80px">登出</button>
        </div>
    </div>
</div>
<script src="/Public/js/jquery-1.11.1.min.js"></script>
<script>
    var messageDiv = $('#messageDiv').hide();
    var mainMenuDiv = $('#mainMenuDiv');
    var loginForm = $('#loginForm');
    var logoutButton = $('#logoutButton');
    var cunkuan1 = $('.cunkuan1');
    var cunkuan2 = $('#cunkuan2');
    var qukuan1=$('#qukuan1');
    var qukuan3=$('.qukuan3');
    var registerButton2 = $('.registerButton2');
    var registerButton1 = $('#registerButton1');

    if({$data}){
        mainMenuDiv.hide();
    }else {
        loginForm.hide();
    }
    var timeId;

    $.ajaxSetup({
        error:function(xhr,err){
            switch (xhr.status){
                case 401:
                case 403:
                    showMessage('未登录');
                    loginForm.show();
                    mainMenuDiv.hide();
                    break;
                default:
                    showMessage('服务器交互失败:'+err);
            }
        }
    });
    $('#logoutButton').click(function () {
        $.get('{:U("Kirito/out")}',function(){
            loginForm.show();
            mainMenuDiv.hide();
        });
    });
    $('#queryButton').click(function(){
        $.get('{:U("User/query")}',function(resp){
            showMessage('余额：'+resp)
        });
    });
    $('#cunkuan').click(function(){
        cunkuan1.show();

    });

    $('#loginButton').click(function(){
        $.post('{:U("Kirito/index")}',loginForm.serialize(),function(resp){
            if(resp.status){
                loginForm.hide();
                mainMenuDiv.show();
            }else {
                showMessage(resp.message);
            }
        },'json');
    });
    function showMessage(mes){
        messageDiv.html(mes).fadeIn(200);
        clearTimeout(timeId);
        timeId = setTimeout(function(){
            messageDiv.fadeOut(200);
        },3000)
    }
    function f(){
        cunkuan1.hide();
    }
    function p(){
        qukuan3.hide();
    }

    $('#cunkuan3').click(function(){
        cunkuan1.hide();
        $.post('{:U("User/cunkuan")}',cunkuan2.serialize(),function(resp){
            showMessage(resp.mss);
        },'json');
    });

    $('#qukuan').click(function (){
        qukuan3.show();
    })

    $('#qukuan2').click(function(){
        qukuan3.hide();
        $.post('{:U("User/qukuan")}',qukuan1.serialize(),function(resp){
            showMessage(resp.mss);
        },'json');
    })

    $('#registerButton').click(function(){
        loginForm.hide();
        registerButton2.show();
    });
    function w(){
        registerButton2.hide();
        loginForm.show();
    };

    $('#registerButton4').click(function(){
        $.post('{:U("Kirito/registerButton")}',registerButton1.serialize(),function(resp){
                showMessage(resp.mss);
        },'json');
    })
</script>
</body>
</html>